<template>
  <div>
    <el-form label-position="top" class="bold-label form-border">
      <el-form-item label="访问权限">
        <el-radio-group v-model="form.public">
          <el-radio :label="true">公开</el-radio>
          <el-radio :label="false">私有</el-radio>
        </el-radio-group>
        <p class="body-line-height info m-l-16">
          <template v-if="form.public">
            - 允许所有人访问空间。
          </template>
          <template v-else>
            - 只允许空间成员访问空间，通过邀请链接添加空间成员；<br />
            - 不会出现在搜索结果中。
          </template>
        </p>
      </el-form-item>
      <el-form-item label="自动接受">
        <el-radio-group v-model="form.autoAccept">
          <el-radio :label="true">打开</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
        <p class="body-line-height info m-l-16" v-html="autoAcceptTip"></p>
      </el-form-item>
      <div>
        <el-button type="primary" @click="onSubmit" :loading="loading">保存修改</el-button>
        <el-button class="right" @click="$emit('update:activeItem', '')">取消</el-button>
      </div>
    </el-form>
    <transfer-space />
    <div class="form-border">
      <div class="title info-deep">删除空间</div>
      <div class="m-t-10">
        <delete-button />
        <span class="info m-l-10">删除空间后不可恢复，请谨慎操作！</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatSpace } from '@/components/spaces/format';
import TransferSpace from './transfer-space';
import DeleteButton from './delete-button';

export default {
  name: 'Advanced', // 高级设置
  components: {
    TransferSpace,
    DeleteButton,
  },
  props: {
    activeItem: String,
  },
  data() {
    return {
      form: {
        public: false,
        autoAccept: false,
      },
      loading: false,
    };
  },
  computed: {
    ...mapState({ curSpace: 'currentSpace' }),
    autoAcceptTip() {
      if (this.form.autoAccept) return '· 自动采纳用户贡献的资源或修改。';
      return '· 需要管理员对用户贡献的资源或修改进行审核。';
    },
    initUpdateParams() {
      return {
        spaceId: this.$route.params.spaceId,
        public: this.form.public,
        autoAccept: this.form.autoAccept,
      };
    },
  },
  methods: {
    ...mapActions({ setCurSpace: 'setCurrentSpace' }),
    // 提交修改
    onSubmit() {
      this.loading = true;
      this.$api.spaces.update(this.initUpdateParams)
        .then((res) => {
          this.$message.success('修改成功');
          this.setCurSpace(formatSpace(res.data));
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    initForm() { Object.assign(this.form, this.curSpace); },
  },
  watch: {
    // 激活时重置表单
    activeItem(val) { if (val === 'advanced') this.initForm(); },
  },
};
</script>

<style></style>
